<!--
 * @Description: 
 * @Author: gaoyunpeng
 * @Date: 2022-01-19 21:31:06
 * @LastEditors: gaoyunpeng
-->
<template>
  <header class="header">
    <dv-decoration-8 style="width: 25%; height: 60px" class="header-left-decoration" />
    <dv-decoration-5 style="width: 40%; height: 60px" class="header-center-decoration" />
    <dv-decoration-8 :reverse="true" style="width: 25%; height: 60px" class="header-right-decoration" />
    <div class="center-title">{{ tname }}</div>
    <div class="time-box">
      <dateTime></dateTime>
    </div>
    <!-- <svg-icon icon-class="weather"></svg-icon> -->
  </header>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import dateTime from '../dateTime.vue';
@Component({
  components: {
    dateTime
  }
})
export default class Header1 extends Vue {
  @Prop({ type: String }) tname?: string;
}
</script>

<style scoped lang="scss">
header {
  position: relative;
  width: 100%;
  height: 100px;
  .header-left-decoration {
    float: left;
  }
  .header-center-decoration {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    margin-top: 30px;
  }
  .header-right-decoration {
    float: right;
  }
  .center-title {
    position: absolute;
    font-size: 36px;
    font-weight: 500;
    left: 50%;
    top: 15px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    letter-spacing: 3px;
    background-image: -webkit-linear-gradient(90deg, #1abce3 33%, #e5f1f5 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .time-box {
    position: absolute;
    color: #fff;
    top: 0.2vh;
    left: 260px;
  }
}
</style>
